<ui:composition template="/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:cc="http://sourceforge.net/projects/jsf-comp">

    <ui:define name="styleone">
    </ui:define>

    <ui:define name="colunaEsquerda">

    </ui:define>

    <ui:define name="conteudo">
        <br/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <br/>
        <h:form id="fReserva">
            <rich:tabPanel id="tabPrincipal" switchType="client">
                <rich:tab label="#{bundle.reservaDadosPrincipais}">
                    <a4j:loadScript  type="text/javascript" src="/resources/scripts/jquery.maskedinput-1.1.4.js" />
                    <h:panelGrid cellpading="2" cellspacing="2" columns="2" columnClasses="field-names, fields">
                        <!--
                        <h:outputLabel for="opDataMarcacao">
                            <h:outputText value="#{bundle.reservaDataMarcacao}" />
                        </h:outputLabel>

                        <h:panelGroup>
                            <h:inputText id="itDataMarcacao" value="#{reservaHospedagemAction.reserva.datamarcacao}" label="#{bundle.reservaDataMarcacao}" size="10" disabled="true">
                                <rich:jQuery selector="#itDataMarcacao" query="mask('99/99/9999')" timing="onload"/>
                                <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                            </h:inputText>
                            <h:outputText value=" (dd/mm/aaaa)" />
                        </h:panelGroup>
-->
                        <h:outputLabel for="opDataReserva" rendered="#{reservaHospedagemAction.reserva.reserva == 1}">
                            <h:outputText value="#{bundle.reservaDataReserva} :" />
                        </h:outputLabel>

                        <h:panelGroup rendered="#{reservaHospedagemAction.reserva.reserva == 1}">
                            <h:inputText id="itDataReserva" value="#{reservaHospedagemAction.reserva.datareserva}" label="#{bundle.reservaDataReserva}" size="10" >
                                <rich:jQuery selector="#itDataReserva" query="mask('99/99/9999')" timing="onload" />
                                <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                            </h:inputText>
                            <h:outputText value=" (dd/mm/aaaa)" />
                        </h:panelGroup>

                        <h:outputLabel for="opDataChegada" rendered="#{reservaHospedagemAction.reserva.reserva == 2}">
                            <h:outputText value="#{bundle.reservaDataChegada} :" />
                        </h:outputLabel>

                        <h:panelGroup rendered="#{reservaHospedagemAction.reserva.reserva == 2}">
                            <h:inputText id="itDataChegada" value="#{reservaHospedagemAction.reserva.datachegada}" label="#{bundle.reservaDataChegada}" size="10">
                                <rich:jQuery selector="#itDataChegada" query="mask('99/99/9999')" timing="onload" />
                                <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                            </h:inputText>
                            <h:outputText value=" (dd/mm/aaaa)" />
                        </h:panelGroup>
<!--
                        <h:outputLabel for="opDataSaida">
                            <h:outputText value="#{bundle.reservaDataSaida}" />
                        </h:outputLabel>

                        <h:panelGroup>
                            <h:inputText id="itDataSaida" value="#{reservaHospedagemAction.reserva.datasaida}" label="#{bundle.reservaDataSaida}" size="10">
                                <rich:jQuery selector="#itDataSaida" query="mask('99/99/9999')" timing="onload" />
                                <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                            </h:inputText>
                            <h:outputText value=" (dd/mm/aaaa)" />
                        </h:panelGroup>
-->
                        <h:outputLabel for="opHospedes">
                            <h:outputText value="#{bundle.hospede} :" />
                        </h:outputLabel>

                        <h:selectOneMenu id="somHospedes" value="#{reservaHospedagemAction.hospedeSelecionado}" label="#{bundle.hospede}" required="true">
                            <s:selectItems value="#{reservaHospedagemAction.hospedes}" var="h" label="#{h.nome} - #{h.cpf}" itemValue="#{h.idhospede}" noSelectionLabel="..." />
                        </h:selectOneMenu>

                        <h:outputLabel for="opTipoApartamento">
                            <h:outputText value="#{bundle.reservaTipoApartamento} :" />
                        </h:outputLabel>

                        <h:selectOneMenu id="somTipoApartamento" value="#{reservaHospedagemAction.tipoApartamento}" label="#{bundle.reservaTipoApartamento}">
                            <s:selectItems value="#{reservaHospedagemAction.tiposApartamento}" var="tp" label="#{tp.descricao}" itemValue="#{tp.idtipo}" noSelectionLabel="..."/>
                            <a4j:support event="onchange" action="#{reservaHospedagemAction.atualizarApartamentos}" reRender="somApartamentos"/>
                        </h:selectOneMenu>

                        <h:outputLabel for="opApartamento">
                            <h:outputText value="#{bundle.reservaApartamento} :" />
                        </h:outputLabel>

                        <h:selectOneMenu id="somApartamentos" value="#{reservaHospedagemAction.apartamentoSelecionado}" label="#{bundle.reservaApartamento}" required="false">
                            <s:selectItems value="#{reservaHospedagemAction.apartamentos}" var="ap" label="#{ap.numApart}" itemValue="#{ap.idapart}" noSelectionLabel="..." />
                            <a4j:support event="onchange" action="#{reservaHospedagemAction.buscarApartamento}" reRender="opDescricao"/>
                        </h:selectOneMenu>


                    </h:panelGrid>
                    <br/>
                    <a4j:outputPanel id="opDescricao">
                        <rich:panel id="pDescricao" bodyClass="rich-lagun-panel-no-header" style="width:100%;height:110px;text-align:left;" >
                            <f:facet name="header">
                                #{bundle.apartamentoDescricao}
                            </f:facet>
                            #{bundle.apartamentoNumero} :<b> #{reservaHospedagemAction.apartamento.numApart}</b><br/>
                            #{bundle.apartamentoNumeroQuarto} : <b> #{reservaHospedagemAction.apartamento.numQuartosApart}</b><br/>
                            #{bundle.apartamentoDescricao} : <b>#{reservaHospedagemAction.apartamento.descricaoApart}</b><br/>
                        </rich:panel>
                    </a4j:outputPanel>

                </rich:tab>
            </rich:tabPanel>
            <br/>
            <h:commandLink action="#{reservaHospedagemAction.criar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtAreaEquipe"
                           rendered="#{reservaHospedagemAction.operacaoAtual == 'CRIACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{reservaHospedagemAction.alterar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtAreaEquipe"
                           rendered="#{reservaHospedagemAction.operacaoAtual == 'ALTERACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{reservaHospedagemAction.cancelar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           immediate="true">
                <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                <h:outputText value="#{messages.botaoCancelar}" />
            </h:commandLink>
        </h:form>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </ui:define>

    <ui:define name="colunaDireita">

    </ui:define>
</ui:composition>